<h2>Intro, coordinates & Lines</h2>
<div class="contents">
<div class="sub2">Tuturial <i>i</i>Scr<i>i</i>ptDes<i>i</i>gn </div>
<div class="sub">Organization</div>
This tutorial is driven by the menu items on the left. Pressing them will make the text dialog you're reading now pop up. Most of the tutorial pages will 
have some graphics as example, these graphics are loaded underneath this text (may vary due to you browser dimensions). Closing this dialog will reveal the
complete drawing. Most drawings are parameterizable, the parameters you're allowed to change will appear in movable panel.<br/> All the parameterizable 
designs are defined in a template (a so called .jsvg) file. And for all the
the tutorial pages the template may be viewed by clicking on a <a class="template" href="points.jsvg">link</a> in the text. (This link will show points.jsvg the 
template for the image behind this dialog) The aim of this tutorial is to teach you how to create parameterizable designs yourself!<br/>
Me myself I'm convinced that even the best teachers can't beat dirty hands so I would strongly recommend to install this site yourself and make
changes to the template or even website. Refer to the 
<a class="link" href="README">README</a> how to install this site. Don't worry about ruining things on your computer or this website, unless you start to do some real design, you 
cannot break anything. In case anything goes wrong simply repeat the "svn checkout" in the README. (These kind of copies are called sandboxes, you make you hands
dirty, but apart from that you won't do any damage). Later in this course I do assume you have a sandbox ready to soil your hands.
<div class="sub">Intro</div>
iScriptDesign processes SVG before it will be rendered to the graphics you see in your browser. In order to start working with iScriptDesign you
should have some basic knowledge of svg, what this tutorial will try to teach you in 2 pages. The rest of the course will focus on adding dynamic dimensions
and bringing script into your svg.<br/>
In case you want too learn more on SVG: Google is your friend. Below google's 3 top hits.
<a class="reference" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">primer</a>
<a class="reference" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">specification</a>
<a class="reference" href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics">wikipedia</a>
<div class="sub">Coordinates</div>
SVG defines a coordinate system with, it should not surprise you, x and y-axis. (0,0 has been defined in the <b>upper</b> left corner. As a consequence the positive
x-axis goes to the right, and the positive y-axis to the bottom). How far it extends on the screen
is dependent of the size of your browserwindow. Due to the size of your browser and the position of the (0,0) coordinate things maybe invisible. 
In a more sophisticated SVG editor you may see them by repositioning the image.
<div class="sub">Lines</div>
Now we're getting to the real SVG: the graphic accompanying this chapter shows a line with the end point editable. Besides that the scale is also editable, check to see how 
big your screen is and what happens when you change the scale or choose coordinates outside the view region.
Also have a look at the template: <a class="template" href="points.jsvg">points</a>. Apart from some mumbo jumbo what will be explained later you'll also see
a &lt;line x1="0" y1="0" .. This tells your browser to draw a line starting at 0,0 to the values you just entered. To unveil what will later be 
explained in more detail: #{ .. } is
processed and together with the #{ } replaced with the value of the parameter you changed earlier.
</div>
</div>
